<template>
  <div class='entrust txtcolor ft12' v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)">
    <div class="partBg radius4">
        <div class="toptitle ratop flex ft14 txtgray between">
            <div class="flex">
                <p :class="['pointer',{'white':current==0}]" @click="current=0,url='transaction_in',list=[],page=1,more=true,getList()">当前委托</p>
                <p :class="['pointer ml15',{'white':current==1}]" @click="current=1,url='transaction_complete',list=[],page=1,more=true,getList()">历史委托</p>
            </div>
            <div class="flex ft12" v-show="current==0">
                <p :class="['pointer',{'blue':url=='transaction_in'}]" @click="url='transaction_in',list=[],page=1,more=true,getList()">买入</p>
                <p :class="['pointer ml15',{'blue':url=='transaction_out'}]" @click="url='transaction_out',list=[],page=1,more=true,getList()">卖出</p>
            </div>
            
        </div>
        <div class="rabom" v-show="current==0">
            <div class="flex txtgray plr15 tc list-tittle">
                <span class="w20 tl">时间</span>
                <span class="w15">交易对</span>
                <span class="w13">方向</span>
                <span class="w20">价格</span>
                <span class="w20">数量</span>
                <span class="w12 tr">操作</span>
            </div>
            <div>
                <ul class="listbox scroll overauto tc plr15" v-if="list.length>0">
                    <li class="flex" v-for="(item,index) in list">
                        <span class="w20 tl">{{item.create_time}}</span>
                        <span class="w15">{{item.currency_name}}/{{item.legal_name}}</span>
                        <span class="w13" :class="item.type=='out'?'red':'green'">{{item.type=='out'?'卖出':'买入'}}</span>
                        <span class="w20">{{item.price}}</span>
                        <span class="w20">{{item.number}}</span>
                        <span class="w12 tr pointer blue" @click="confirm(index,item.id)">撤销</span>
                    </li>
                    <li class="ft12 tc pointer txtgray" @click="getmore" v-if='more'>加载更多</li>
                    <li class="ft12 tc pointer txtgray" v-else>-END-</li>
                </ul>
                <div class="listbox flex column jscenter alcenter tc txtgray" v-else>
                    <p class="iconfont icon-touzijilu ft30"></p>
                    <p class="mt10">暂无记录</p>
                </div> 
            </div>
        </div>
        <div class="rabom" v-show="current==1">
            <div class="flex txtgray plr15 tc list-tittle">
                <span class="w15 tl">时间</span>
                <span class="w12">交易对</span>
                <span class="w13">方向</span>
                <span class="w12">价格</span>
                <span class="w13">数量</span>
                <span class="w12">成交额</span>
                <span class="w13">手续费</span>
                <span class="w10 tr">状态</span>
            </div>
            <div>
                <ul class="listbox scroll overauto tc plr15" v-if="list.length>0">
                    <li class="flex" v-for="(item,index) in list">
                        <span class="w15 tl">{{item.create_time}}</span>
                        <span class="w12">{{item.currency_name}}/{{item.legal_name}}</span>
                        <span class="w13" :class="item.type=='out'?'red':'green'">{{item.type=='out'?'卖出':'买入'}}</span>
                        <span class="w12">{{item.price}}</span>
                        <span class="w13">{{item.number}}</span>
                        <span class="w12">{{item.number*item.price | Fixed2}}</span>
                        <span class="w13">{{item.out_fee}}</span>
                        <span class="w10 tr">已完成</span>
                    </li>
                </ul> 
                <div class="listbox flex column jscenter alcenter tc txtgray" v-else>
                    <p class="iconfont icon-touzijilu ft30"></p>
                    <p class="mt10">暂无记录</p>
                </div> 
            </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name:'',
  data () {
    return {
        current:0,
        url:'transaction_in',
        page:1,
        loading:false,
        more:'true',
        list:[],
    };
  },
  created(){
    this.getList();
  },
  methods:{
    getList(){
        let that = this;
        that.loading = true;
        that.axios.post("/api/"+that.url, {page:that.page}).then(res => {
            that.loading = false;
            if(res.data.type == "ok") {
                var msg = res.data.message;
                var data = msg.list;
                //var data = [{id:8,create_time:'2019-06-21',currency_name:'EOS',legal_name:'USDT',type:'in',price:'6.71',number:2.154,out_fee:0.124}]
                that.list = that.list.concat(data);
                var last_page = Math.ceil(msg.count/msg.limit);
                if(last_page<=that.page){
                    that.more = false;
                }
            }
        }).catch(error => {
            console.log(error);
        });
    },
    getmore(){
        let that = this;
        that.page++;
        that.getList();
    },
    confirm(index,id){//撤单
        var that = this;
        this.$confirm('此操作将撤销该订单, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            that.revoke(index,id);
        }).catch(() => {
          that.$message({type: 'info',message: '已取消'});
        }); 
    },
    revoke(index,id){
        let that = this;
        var type = that.url=='transaction_in' ? 'in' : 'out';
        console.log(index,id,type);
        that.axios.post("/api/transaction_del", {id,type}).then(res => {
            if(res.data.type == "ok") {
                that.$message({type: 'success',message: '撤销成功!'});
                that.list.splice(index, 1);//动态删掉这个订单
            }else{
                that.$message({type: 'info',message: res.data.message});
            }
        }).catch(error => {
            console.log(error);
        });
    }
  }
}

</script>
<style lang='scss' scoped>
.entrust{
    .list-tittle{
        height: 30px;
        line-height: 30px;
    }
    .listbox{
        height: calc(202px - 70px);
        li{margin-bottom: 10px}
    }
}
</style>